<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>皇的用户登录</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css">
    <style>
        #nav_div img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 5px;
        }
    </style>
</head>
<body>
<!--    导航栏begin -->
<div class="container-fluid" id="nav_div">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">大庆师范学院</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">admin</a></li>
                        <!-- data-toggle="modal"指定点击元素触发弹出模态框事件，data-target指定要弹出的模态框的目标元素-->
                        <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;我的购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">安全退出</a></li>
                        <li><img src="/imgs/墨镜流泪.webp"></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!--    导航栏end-->



<!--    登录模态框begin-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户登录入口</h4>
            </div>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="firstname" class="col-md-2 control-label">邮箱</label>
                    <div class="col-md-7">
                        <input type="text" class="form-control" id="firstname" placeholder="请输入邮箱">
                    </div>
                    <div class="col-md-2" style="margin-left: -30px">
                        <button type="button" class="btn btn-success" >发送验证码</button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-md-2 control-label">验证码</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" id="lastname" placeholder="请输入验证码">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">请记住我
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">登录</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--    登录模态框end-->



<!-- 登录表单begin -->
<!-- 外面套的这两层可以让页面左右两端留白 -->
<div class="container" id="login_div">
    <div class="row">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="firstname" class="col-md-2 control-label">邮箱</label>
                <div class="col-md-7">
                    <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                </div>
                <div class="col-md-2" style="margin-left: -30px">
                    <button type="button" class="btn btn-success" onclick="send_code()">发送验证码</button>
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-md-2 control-label">验证码</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="code" placeholder="请输入验证码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">请记住我
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 登录表单end -->


<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.js"></script>

<script>
    function send_code() {

    }
</script>
</body>
</html>